<template>
    <div class="card-box" style="margin-top: 60px;">
        <el-row>
            <el-col :md="11" :offset="6">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm">
                    <el-form-item label="用户业务模式：" prop="name">
                        <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="描述：">
                        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="ruleForm.textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="CODE：" prop="code">
                        <el-select v-model="ruleForm.code" filterable placeholder="请选择" class="select">
                            <el-option v-for="item in code" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="支持市场类型：">
                        <el-radio-group v-model="ruleForm.type1">
                            <el-radio :label="1">公共市场</el-radio>
                            <el-radio :label="2">企业市场</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="套餐资费项目：">
                        <el-checkbox-group v-model="ruleForm.type2">
                            <el-checkbox label="1">收取月租（功能费）</el-checkbox>
                            <el-checkbox label="2">收取单卡超额资费</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="分润选项：">
                        <el-form-item label="设置用户价格：">
                            <el-radio-group v-model="ruleForm.type3">
                                <el-radio label="1">平台</el-radio>
                                <el-radio label="2">分销商</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="分润模式：">
                            <el-checkbox-group v-model="ruleForm.type4">
                                <el-checkbox label="1">月租</el-checkbox>
                                <el-checkbox label="2">套餐</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="公众号渠道：">
                            <el-radio-group v-model="ruleForm.type5">
                                <el-radio label="1">平台</el-radio>
                                <el-radio label="2">分销商</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="附加功能：">
                        <el-checkbox-group v-model="ruleForm.type6">
                            <el-checkbox label="1" name="type">沉默期</el-checkbox>
                        </el-checkbox-group>
                        <el-checkbox-group v-model="ruleForm.type7">
                            <el-checkbox label="2" name="type">可续期</el-checkbox>
                        </el-checkbox-group>
                        <el-checkbox-group v-model="ruleForm.type8" @change="select1">
                            <el-checkbox label="3" name="type">共享流量池</el-checkbox>
                        </el-checkbox-group>
                        <el-radio-group v-model="ruleForm.type20" v-show="ruleForm.type8 == 3">
                            <el-radio :label="1">多档位套餐共享</el-radio>
                            <el-radio :label="2">单档位套餐独享</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="划拨设置：">
                        <el-checkbox-group v-model="ruleForm.type9" @change="select">
                            <el-checkbox :label="1" name="type">设置开卡套餐</el-checkbox>
                            <el-checkbox :label="2" name="type" v-show="ruleForm.type1 == 1">开卡套餐选项</el-checkbox>
                        </el-checkbox-group>
                        <el-checkbox-group v-model="ruleForm.type10">
                            <el-checkbox label="1" name="type" v-show="ruleForm.type1 == 1">续订套餐选项</el-checkbox>
                        </el-checkbox-group>
                        <el-checkbox-group v-model="ruleForm.type11">
                            <el-checkbox label="1" name="type">断网选项</el-checkbox>
                        </el-checkbox-group>
                        <el-checkbox-group v-model="ruleForm.type12">
                            <el-checkbox label="1" name="type">设置服务周期</el-checkbox>
                        </el-checkbox-group>
                        <el-checkbox-group v-model="ruleForm.type13">
                            <el-checkbox label="1" name="type">实名认证选项</el-checkbox>
                        </el-checkbox-group>
                        <el-checkbox-group v-model="ruleForm.type14" v-show="ruleForm.type1 == 2">
                            <el-checkbox label="1" name="type">短信功能选项</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                code: [{
                    value: '选项1',
                    label: '移动'
                }, {
                    value: '选项2',
                    label: '联通'
                }, {
                    value: '选项3',
                    label: '电信'
                }, {
                    value: '选项4',
                    label: '虚拟运营商'
                }],
                ruleForm: {
                    name: '',
                    textarea: '',
                    code: '',
                    type1: 1,
                    type2: [],
                    type3: '',
                    type4: [],
                    type5: '',
                    type6: '',
                    type7: '',
                    type8: [],
                    type9: [],
                    type10: '',
                    type11: '',
                    type12: '',
                    type13: '',
                    type14: '',
                    type20: 1
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入用户业务模式名称',
                        trigger: 'blur'
                    }],
                    code: [{
                        required: true,
                        message: '请选择CODE类别',
                        trigger: 'change'
                    }]
                }
            };
        },
        created() {
            this.getData()
            console.log()
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.$route.fullPath == '/carriers/new') {
                            this.$axios.post('/api/carriers', {
                                name: this.ruleForm.name,
                                contact_person: this.ruleForm.contact_person,
                                email: this.ruleForm.email,
                                phone_number: this.ruleForm.phone_number,
                                carrier_type: this.ruleForm.carrier_type
                            }).then((res) => {
                                this.$store.commit('setAlert', res.data)
                                this.$router.push({
                                    path: '/carriers'
                                })
                            })
                        } else {
                            this.$axios.put(
                                `/api/carriers/${this.$route.query.id}`, {
                                    name: this.ruleForm.name,
                                    contact_person: this.ruleForm.contact_person,
                                    email: this.ruleForm.email,
                                    phone_number: this.ruleForm.phone_number,
                                    carrier_type: this.ruleForm.carrier_type
                                }
                            ).then((res) => {
                                this.$store.commit('setAlert', res.data)
                                this.$router.push({
                                    path: '/carriers'
                                })
                            })
                        }
    
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            select(val) {
                val.forEach((val) => {
                    if (val == 1) {
                        this.ruleForm.type9 = [1]
                    } else if (val == 2) {
                        this.ruleForm.type9 = [2]
                    }
                });   
            },
            select1(val) {
                console.log(this.ruleForm.type8)
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$router.push({
                    path: '/carriers'
                })
            },
            getData() {
                this.$axios.get(`/api/carriers/${this.$route.query.id}/edit`).then((res) => {
                    this.ruleForm.name = res.data.name
                    this.ruleForm.carrier_type = res.data.carrier_type
                    this.ruleForm.contact_person = res.data.contact_person
                    this.ruleForm.email = res.data.email
                    this.ruleForm.phone_number = res.data.phone_number
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .select {
        width: 100%;
    }
</style>

